<template>
	<div class="container">
		<el-container>
			<el-header>
				<div style="width: 200px">
					<img style="width: 60px; height: 45px;" :src="this.$store.state.userinfo.avatar" />
				</div>
				<div class="top-menu">
					<div>
						<el-menu :default-active="activeIndex + ''" class="el-menu-demo" mode="horizontal"
							background-color="#2b83f9" text-color="#ccc" active-text-color="#fff" @select="selectInd">
							<el-menu-item :index="index|numToString" v-for="(item, index) in this.menuList"
								:key="index">
								<template slot="title">
									<i></i>
									<span>{{ item.title }}</span>
								</template>
							</el-menu-item>
						</el-menu>
					</div>
					<!-- 退出 -->
					<el-dropdown trigger="click">
						<span class="el-dropdown-link">
							<img src="../assets/img1.jpg" />
							<i class="el-icon-caret-bottom"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<div class="clearfix">
								<div class="user-avatar">
									<img style="width: 32px; height: 32px; border-radius: 50%"
										src="../assets/img1.jpg" />
								</div>
								<div class="user-name">超级管理员</div>
							</div>
							<div class="setting">
								<div>
									<div class="icon">
										<i class="el-icon-s-tools"></i>
									</div>
									<div>
										<span>账号设置</span>
									</div>
								</div>
								<div @click="loginOut">
									<div class="icon">
										<i class="el-icon-s-tools"></i>
									</div>
									<div>
										<span>退出登录</span>
									</div>
								</div>
							</div>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</el-header>
			<el-container>
				<el-aside width="200px">
					<el-menu class="el-menu-vertical-demo" background-color="#fff" active-text-color="#2b83f9" router
						unique-opened>
						<el-submenu :index="item.menu_url+'/'" v-for="(item,index) in leftMenuList" :key="index"
							v-if="item.children">
							<template slot="title">
								<span>{{ item.title }}</span>
							</template>
							<el-menu-item :index="item1.menu_url+'/'" v-for="(item1,index) in item.children"
								:key="index">
								<span slot="title">{{item1.title}}</span>
							</el-menu-item>
						</el-submenu>

						<el-menu-item :index="item.menu_url" v-for="(item, ind) in leftMenuList" :key="ind"
							v-if="!item.children">
							<span slot="title">{{ item.title }}</span>
						</el-menu-item>
					</el-menu>
				</el-aside>
				<el-main>
					<div class="user-router">
						<el-breadcrumb separator-class="el-icon-arrow-right">
							<el-breadcrumb-item :to="{ path: '/Student' }"><span
									style="font-size: 18px; color: #8f8f8f; font-weight: bold">学员管理</span>
							</el-breadcrumb-item>
						</el-breadcrumb>
					</div>
					<div class="router">
						<router-view></router-view>
					</div>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import common from "../assets/common/mixins.js";
	export default {
		// 注册公共组件
		mixins: [common],
		// 组件名称
		name: "demo",
		// 组件状态值
		data() {
			return {
				menuList: {},
				showBox: false,
				activeIndex: 0,
				leftMenuList: [],
				nums: 0,
			};
		},
		// 组件方法
		methods: {
			tabShow() {
				this.showBox = !this.showBox;
			},
			// 获取左侧和顶部数据
			async getUserMenus() {
				try {
					const {
						data: res
					} = await this.$apis.getMenu();
				    console.log(res)
					this.menuList = res.rows;
					this.leftMenuList = this.menuList[this.nums].children;
				} catch (e) {
					this.$message.error(e);
				}
			},
			selectInd(ind) {
				this.activeIndex = ind;
				this.nums = Number(ind);
				this.leftMenuList = this.menuList[this.nums].children;
			},
			loginOut() {
				this.$confirm("确定退出?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(() => {
						this.$store.commit("logOut")
						this.$router.push("/Login");
						this.$message.success("退出成功");
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消退出",
						});
					});
			},
		},
		/**
		 * 组件实例创建完成
		 */
		created() {
			this.getUserMenus();
		},
	};
</script>

<style lang="scss" scoped>
	.clearfix {
		display: flex;
		width: 160px;
		height: 68px;
		align-items: center;
		border-bottom: 1px solid #efefef;

		.user-avatar {
			width: 68px;
			text-align: center;
		}

		.user-name {
			font-size: 14px;
			color: #2185f0;
			line-height: 36px;
		}
	}


	.setting {
		div {
			cursor: pointer;
			display: flex;
			align-items: center;
			height: 48px;
			line-height: 48px;

			.icon {
				width: 68px;
				text-align: center;
				display: flex;
				justify-content: center;
				font-size: 20px;
				color: #888888;
			}

			span {
				font-size: 12px;
				color: #888888;
			}
		}

		div:hover {
			background-color: #efefef;
		}
	}


	.container {
		height: 100%;
		display: flex;
		flex: 1;
		flex-direction: column;

		.el-container {
			position: relative;

			.el-header {
				display: flex;
				align-items: center;
				background-color: #2b83f9;

				.top-menu {
					display: flex;

					.el-menu {
						.el-menu-item {
							i {
								color: #efefef;
							}
						}
					}


					.el-dropdown {
						position: absolute;
						right: 20px;
						top: 15px;
						display: flex;
						align-items: center;

						span {
							img {
								width: 32px;
								height: 32px;
								border-radius: 50%;
							}

							i {
								font-size: 24px;
								color: #efefef;
							}
						}
					}
				}
			}


			.el-container {
				display: flex;
				flex: 1;

				.el-aside {}

				.el-menu {
					height: 100%;
				}

				.el-main {
					padding: 0px;
					flex: 1;

					.user-router {
						padding: 20px 20px 0px;
						box-sizing: border-box;
						border-bottom: 1px solid #cccccc;
						background-color: #ffffff;
					}

					.router {
						padding: 5px 10px;
						box-sizing: border-box;
					}
				}
			}
		}
	}
</style>
